<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    request.setCharacterEncoding("UTF-8");
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>摆烂俱乐部</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
    <!-- owl carousel-->
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="favicon.png">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>

<%String username = (String) session.getAttribute("username");%>
<!-- navbar-->
<header class="header mb-5">
    <!--
    *** TOPBAR ***
    _________________________________________________________
    -->
    <jsp:include page="common/login.jsp"></jsp:include>
    <jsp:include page="common/top1.jsp"></jsp:include>
    <!-- 搜索 -->
    <jsp:include page="common/search.jsp"></jsp:include>
</header>
<!-- *** TOP BAR END ***-->

<div id="all">
    <div id="content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- breadcrumb-->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.jsp">家</a></li>
                            <li aria-current="page" class="breadcrumb-item active">新用户</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-lg-6">
                    <div class="box">
                        <!-- Register -->
                        <h1>新帐户</h1>
                        <p class="lead">还不是我们的注册客户吗?</p>
                        <p>美丽的海洋生活让我们拥有更好的海洋生态环境!</p>
                        <p class="text-muted">如果您有任何问题，请随时联系我们，我们的客户服务中心全天候为您服务。</p>
                        <hr>
                        <form method="post" action="./user?action=register">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input name="username" required type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input name="password" pattern="(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}" title="密码必须包含至少一个字母和一个数字，且长度不少于6位" required type="password" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱</label>
                                <input name="email" required type="email" id="email" class="form-control">
                            </div>
                            <div class="text-center">
                                <button type="submit" name="submit" class="btn btn-primary"><i
                                        class="fa fa-user-md"></i> 注册
                                </button>
                                <button type="reset" name="submit" class="btn btn-primary"><i class="fa fa-refresh"></i>重置</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="box">
                        <!-- Login -->
                        <h1>登录</h1>
                        <p class="lead">已经是我们的用户了?</p>
                        <hr>
                        <form method="post" action="./user?action=login">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input name="username" required type="text" id="username" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="password">用户密码</label>
                                <input name="password" pattern="(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}" title="密码必须包含至少一个字母和一个数字，且长度不少于6位" required type="password" id="password" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="captcha">验证码</label>
                                <input style="margin-bottom: 20px" type="text" class="form-control" required id="captcha" name="captcha">
                                <div class="text-center">
                                    <img alt="加载中……" src="check" id="imgcaptcha" border="1" onclick="reload()">
                                </div>
                            </div>
                            <div class="text-center">
                                <button type="submit" name="submit" class="btn btn-primary"><i
                                        class="fa fa-sign-in"></i> 登录
                                </button>
                                <button type="reset" name="submit" class="btn btn-primary"><i class="fa fa-refresh"></i>重置</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--
    *** 版权 ***
    _________________________________________________________
    -->
<jsp:include page="common/copyright.jsp"></jsp:include>
<!-- *** COPYRIGHT END ***-->
<!-- JavaScript files-->
<script>
    function reload() {
        const timestamp = new Date().getTime();  // 获取当前时间戳
        const img = document.getElementById('imgcaptcha');
        img.src = "check?c=" + timestamp;  // 在图片链接后添加时间戳参数
    }
</script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
<script src="js/front.js"></script>
</body>
</html>